<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <style>
        a {
            display: block;
            float: right;
        }
    </style>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
            integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"
            integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
            crossorigin="anonymous"></script>

    <title>电影列表</title>

    <style>
        div#body {
            margin: 0 100px;
        }
    </style>
</head>
<body>
<div id="body">
    <h2>电影列表分页展示</h2>
    <a href="/movie/toInsert" th:if="${session.user.role == 0}">添加电影</a>

    <br/><br>

    <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="输入要搜索的关键字" aria-label="Recipient's username"
               aria-describedby="button-addon2" id="input-search">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button" id="button-addon2">Search</button>
        </div>
    </div>

    <br/>

    <div>
        <!-- 显示电影列表数据 -->
        <table class="table">
            <thead class="thead-dark">
            <tr>
                <th scope="col">#</th>
                <th scope="col">电影名称</th>
                <th scope="col">影片别名</th>
                <th scope="col">主角</th>
                <th scope="col" th:if="${session.user.role == 0}">操作</th>
            </tr>
            </thead>
            <tbody id="movies">

            </tbody>
        </table>

        <br/>

        <!-- 电影分页 -->
        <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-center">
            </ul>
        </nav>
    </div>
</div>
<script src="/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    var tempPage
    var tempWord = ""
    var tempUser = {
        role: 1
    }

    /* 在界面加载完成之后，做数据交互
    * 目的：分页加载数据，并展示在 table 及 ul 中
    */
    //界面就绪，做初始化操作
    $(document).ready(function () {
        function getUser() {
            $.get(
                "/user/current",
                function (user) {
                    tempUser = user
                }
            )
        }

        //根据分页码切换数据
        function changePageData(index, word = "") {
            // tempPage.current = index
            tempWord = word
            $.get(
                "/movie/search/".concat(index).concat("?word=").concat(word),
                function (movies) {
                    //添加每一行电影数据对应的 HTML 代码
                    //1、使用 DOM.insertAfter；注意将原始数据清理掉
                    //2、使用 DOM.html()

                    var html = "";
                    for (var i = 0; i < movies.length; i++) {
                        var movie = movies[i]

                        html +=
                            "<tr>\n" +
                            "  <th scope=\"row\">" + movie.mid + "</th>\n" +
                            "  <td>" + movie.mname + "</td>\n" +
                            "  <td>" + movie.maliasname + "</td>\n" +
                            "  <td>" + movie.leadingactor + "</td>\n"

                        if (tempUser.role === 0) {
                            html +=
                                "  <td>" +
                                "<button type=\"button\" value='" + movie.mid + "' class=\"btn btn-success\">修改</button>\n" +
                                "<button type='button' value='" + movie.mid + "' class=\"btn btn-danger\">删除</button>" +
                                "</td>\n"
                        }

                        html +=
                            "</tr>"
                    }


                    $("#movies").html(html)
                }
            )
        }

        //初始化加载分页数据
        function selectPage(word = "") {
            $.get(
                "/movie/search/page?word=".concat(word),
                function (page) {
                    if (page.pageNumber === 0) {
                        $(".pagination").html("")
                        return
                    }

                    tempPage = page

                    //动态加载 页码
                    var html = "" //这是 ul 下所有 li 的 HTML 源代码

                    for (var i = 1; i <= tempPage.pageNumber; i++) {
                        if (tempPage.current === i) {
                            html +=
                                "<li class=\"page-item active\"><a class=\"page-link\" href=\"#\">" + i + "</a></li>"
                        } else {
                            html +=
                                "<li class=\"page-item\"><a class=\"page-link\" href=\"#\">" + i + "</a></li>"
                        }
                    }

                    $(".pagination").html(html)
                }
            )
        }

        //为页码设置事件 -> 分页切换
        $(document).on("click", ".page-link", function () {
            //分页数据切换
            //1、若为搜索项，可每次检测搜索输入框是否有值，有值，每次去获取
            //2、临时记录每次搜索的记录
            changePageData(Number(this.innerText), tempWord)
            //分页栏的切换
            //将原有属性为 active 的 a 改为默认
            $(".active").removeClass("active")
            //将当前 a 的属性添加 active
            $(this.parentElement).addClass("active")
        })

        //搜索：根据电源名称或别名进行模糊查询
        $("#button-addon2").click(function () {
            var word = $("#input-search").val()

            changePageData(1, word)
            selectPage(word)
        })

        $(document).on("click", ".btn-success", function () {
            //修改数据
            var mid = $(this).val()
            window.location.href = "/movie/toEdit?mid=".concat(mid)
        })

        $(document).on("click", ".btn-danger", function () {
            //删除数据
            var mid = $(this).val()
            window.location.href = "/movie/delete?mid=".concat(mid)
        })

        //TODO 1、加载第一页的数据；2、加载总的页码
        getUser()
        changePageData(1)
        selectPage()

    })

</script>
</body>
</html>